<template>
    <div class="main w-100 h-100">
        <header class="clearfix w-100">
            <h1 class="fl title clearfix">
                <img class="fl" :src="logoImg" alt="">
                <div class="fl">
                    <p style="font-size:18px;font-weight:600;" class="t-overflow">
                        {{realname}}
                    </p>
                    <p style="font-size:14px;">
                        融合教育云平台
                    </p>
                </div>
            </h1>
            <div class="fl nav">
                <el-menu
                class="el-menu-demo"
                default-active="home"
                background-color="#269cff"
                mode="horizontal"
                @select="handleSelect"
                text-color="#fff"
                active-text-color="#ffd04b">
                    <el-menu-item index="home">首页</el-menu-item>
                    <el-menu-item index="study">学生档案</el-menu-item>
                    <el-menu-item index="teaching">教学计划</el-menu-item>
                    <el-menu-item index="center">教案中心</el-menu-item>
                    <el-menu-item index="summary">工作总结</el-menu-item>
                    <!-- <el-menu-item index="activity">活动开展</el-menu-item> -->
                    <el-menu-item index="pinggu">评估中心</el-menu-item>
                    <el-menu-item index="ziyuan">资源中心</el-menu-item>
                </el-menu>
            </div>
            <ul class="clearfix fr user t-c">
                <li class="fl">
                    <el-dropdown trigger="hover" @command="changeUser">
                        <span class="el-dropdown-link pointer" style="color:#fff;">
                            <i class="el-icon-user-solid"></i>
                            {{username}}
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="password">修改秘密</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li class="fl" v-if="userType == '1'">
                    <el-dropdown trigger="hover" @command="commandhandler">
                        <span class="el-dropdown-link" style="color:#fff;">
                            <i class="pointer el-icon-setting"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="org">机构设置</el-dropdown-item>
                            <el-dropdown-item command="teacher">教师管理</el-dropdown-item>
                            <el-dropdown-item command="classrome">教室管理</el-dropdown-item>
                            <el-dropdown-item command="register">系统注册</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li class="fl">
                    <i class="pointer el-icon-switch-button" @click="loginout" title="点击退出"></i>
                </li>
            </ul>
        </header>
        <div class="page-center">
            <div class="page-center-warp">
                <router-view/>
            </div>
        </div>
        <elepassword ref="password"></elepassword>
        <ele-org ref="org" :SECTION="SECTION"></ele-org>
        <ele-teacher ref="teacher"></ele-teacher>
        <ele-class-rome ref="classrome"></ele-class-rome>
        <ele-register ref="register" :isDisabled="true" :info="registerinfo" :hasValue="true" :SECTION="SECTION"></ele-register>
    </div>
</template>
<script>
const logoImg = require('./../../assets/u15.svg');
import elepassword from './password.vue'
// 机构管理
import eleOrg from './org.vue'
import eleTeacher from './teacher.vue'
import eleClassRome from './class-rome.vue'
import eleRegister from './register.vue'
import {logout,getregedit} from '@/api/index.js'
export default {
    components:{
        elepassword,
        eleOrg,
        eleTeacher,
        eleClassRome,
        eleRegister
    },
    data() {
        return {
            logoImg:logoImg,
            info:{},
            registerinfo:{},
            SECTION:[]
        }
    },
    created() {
        let info = this.$util.getUserInfo();
        this.info = info || {};
        this.login_out();
    },
    computed:{
        username() {
            return this.info.username || ''
        },
        realname() {
            return this.info.realname || ''
        },
        userType(){
            return this.info.usertype || ''
        }
    },
    beforeRouteLeave(to, from, next) {
      clearTimeout(this.timeOut);
      let that = this;
      document.removeEventListener('keyup', that.defaultEvent, false);
      document.body.onmouseup = null;
      document.body.onmousemove = null;
      document.body.onkeyup = null;
      document.body.onclick = null;
      document.body.ontouchend = null;
      next()
    },
    mounted(){
        let loc = localStorage.getItem('SECTION') ;
        this.SECTION = loc ? JSON.parse(loc) : []
    },
    methods:{
        login_out() {
            this.startTimer();
            document.body.onmouseup = this.startTimer;
            document.body.onmousemove = this.startTimer;
            document.body.onkeyup = this.startTimer;
            document.body.onclick = this.startTimer;
            document.body.ontouchend = this.startTimer;
        },
        startTimer() {
            clearTimeout(this.timeOut);
            this.timeOut = setTimeout(() => {
                this.$router.push({ path: '/login' })
            }, 1000 * 60 * 30)
        },
        handleSelect(e) {
            this.$router.push({name:e});
        },
        changeUser(e){
            if(e === 'password') {
                this.$refs.password.dialogVisible = true;
            }
        },
        loginout(){
            this.$util.openTips('是否确定退出登录？').then((res) => {
                let info = this.$util.getUserInfo();
                logout({bUser:this.info.username}).then((res) => {
                    if(res) {
                        this.$util.loginOutPage()
                    }
                })
            }).catch(()=>{

                })
        },
        commandhandler(e){
            if(e == 'register') {
                getregedit({
                    bDeptID:this.info.deptid,
                    bUserName:this.info.username
                }).then((res) => {
                    this.registerinfo = res[0];
                    this.$refs.register.dialogVisible = true;
                })
            } else {
                this.$refs[e].dialogVisible = true;
            }
        },
    }
}
</script>
<style lang="less">
header{
    .el-menu.el-menu--horizontal{
        border-bottom-color: #269cff
    }
    .el-menu-item{
        padding:0 15px;
    }
}

</style>

<style lang="less" scoped>
header{
    background-color: #269cff;
    color:#fff;
}
.title,.user{
    width:200px;
    box-sizing: border-box;
}
.title{
    width:260px;
    padding:10px 0 0 10px;
    img{
        width: 40px;
        height: 40px;
        margin-right:10px;
    }
    p{
        &:nth-child(1){
            width:200px;
        }
    }
}
.user{
    line-height:60px;
    li{
        margin-right:10px;
        min-width: 40px;
        i{
            font-size: 18px;
        }
    }
}
.nav{
    width: calc(~"100% - 400px");
    position: relative;
    .el-menu-demo{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        min-width: 575px;
    }
}
.main{

    background-color: rgba(240, 242, 245, 1);
}
.page-center{
    height: calc(~"100% - 70px");
    overflow-y: auto;
    .page-center-warp{
        height: 100%;
        margin:0 auto;
        width:1100px;
    }
}
</style>
